:host(.qa-bar) {
  --width: 600px;
  --color: rgb(204, 204, 204);
  --input-color: rgb(171, 178, 191);
  --input-background-color: rgb(29, 31, 35);
  --background-color: rgb(33, 37, 43);
  --border-color: #878787;
  --outline-color: #3e4452;
  --loading-color: #3cefff;
  --scroll-color: rgba(78, 86, 102, 0.38);
}

:host(.qa-bar) {
  display: block;
  position: absolute;
  top: 30px;
  left: 50vw;
  margin-left: -300px;
  z-index: 1000;
  width: var(--width);
  background-color: var(--background-color);
  color: var(--color);
  border-radius: 5px;
  font-size: 13px;

  .qa-bar-header {
    width: calc(100% - 12px);
    padding: 6px 6px 0;
  }

  .qa-bar-input {
    position: relative;
    width: 100%;
    height: 24px;
    background-color: var(--input-background-color);

    input {
      display: inline-block;
      box-sizing: border-box;
      line-height: inherit;
      font-family: inherit;
      font-size: inherit;
      background-color: inherit;
      color: var(--input-color);
      border: none;
      resize: none;
      text-overflow: ellipsis;
      width: 100%;
      height: 100%;
      padding: 4px;
    }

    input:focus {
      outline-width: 1px;
      outline-style: solid;
      outline-offset: -1px;
      opacity: 1;
      outline-color: var(--outline-color);
    }
  }

  quick-action-input-loading {
    position: absolute;
    top: -3px;
    right: 5px;
    font-size: 4px;
    width: 22px;
    height: 22px;
    --color: var(--loading-color);
  }

  quick-action-list {
    --list-scroll-color: var(--scroll-color);
  }
}

:host(.qa-bar.hidden) {
  display: none;
}
